Añadir una vistosa galería no es complicado siempre y cuando no mezclemos librerías que ocasionen conflictos entre sí. La que vamos a ver está creada con jQuery y es una idea de SOHTANAKA
Aunque resulta muy atractiva también es cierto que necesita bastante espacio  así que opte por prescindir  de la imagen que se muestra a mayor tamaño, de esa forma la podemos añadir en cualquier parte del blog   dependiendo claro está del tamaño disponible. Para el ejemplo añadí nueve imágenes pero podemos aumentar la cantidad si así lo deseamos.
Los estilos y los scripts los añadimos justo después de ]]></b:skin>


<style type='text/css'>
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(url-imagen) no-repeat center center;
border: none;
}
</style>


<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});

});
//]]>
</script>

Donde deseamos mostrar la galería añadimos las imágenes de la siguiente forma.

<ul class="thumb">
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
</ul>

En url-imagen añadimos la url de cada imagen, para añadir más imágenes añadiremos la siguiente línea por cada imagen:
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
Por último descargamos la siguiente imagen:

La subimos a nuestro álbum de Picasa y pegamos la url en los estilos donde dice:
ul.thumb li img.hover {
background:url(url-imagen) no-repeat center center;
Sib

Gracias Gema es una buena idea hacerlo asi....
las imagenes supongo tendrán que ser de un tamaño pequeño verdad??
un abrazo
Susana

Responder
Gem@

:: Te mandé un mail en respuesta a tu duda hace unos minutos Sib.
Las imágenes de este ejemplo se muestran de 100x100 tengan el tamaño que tengan pero si podemos subirlas que no sean muy grandes mucho mejor porque así no cargamos tanto el blog :)

Responder
JMiur

Excelente :D

Responder
Ŵebmaster™

Excelente opcion para mostrar las imagenes, pero no logro que funcione en mi blog :'(

Responder
Unknown

hola gem@, aquí me puedes ayudar: ¿qué son librerías incompatibles entre sí? ¿qué sería incompatible con jQuery? graciasss

Responder
Eva Flores

Hola Gema, una preguntita, ¿aunque sólo quieras poner la galería en un post es necesario introducir los códigos en la plantilla?

Responder
Unknown

hola gema, hace tiempo que sigo tu blog, y decirte que me ha ayudado muchisimo. pero ahora tengo un problema y es que mucha gente me ha dicho que al abrir mi blog se les cierra el navegador de internet; en uno de mis ordenadores de casa me pasa exactamente lo mismo, que puedo hacer para solucionarlo? es problema de que el blog pesa mucho?
espero sepas la respuesta. un saludo

Responder
Gem@

:: Gracias JMiur, era de esperar que resultara :D

:: Ŵebmaster™ dime donde lo tienes añadido y miramos ese problema :)

:: Lara las librerías Javascript nos permiten crear efectos visuales y dinámicos cuando ejecutan determinado script, cada librería tiene sus propios plugins que facilitan esos efectos, posiblemente te suene haber leído sobre Mootools, jQuery,Prototype y Scriptaculous ¿verdad?.
Cuando hablamos de incompatibilidad nos referimos que si estamos usando en el blog scripts de Scriptaculous por ejemplo y para crear algún otro afecto añadimos también de Mootools es muy posible que dejen de funcionar uno u otro o los dos. Por eso es recomendable decantarse por una librería para no mezclar y encontrarnos con esos problemas.
¿Cómo sé que librería estoy usando? normalmente siempre se explica en el sitio donde se consiguen los scripts, y también lo veremos porque al añadir algún efecto además de añadir el script del efecto debemos añadir el de la librería.

:: *Eva* sin los códigos no funciona la galería ya que los estilos la ubican y los scripts proporcionan el efecto, pero puedes añadirlos dentro del mismo post, en los estilos por ejemplo tendría que añadirse todo en una misma línea y para los scrips quitamos //<![CDATA[ al principio y //]]> al final (Al hacerlo de esa forma la galería sólo funcionará en ese post)

:: Ai-Amano he accedido a tu blog y no se ha cerrado el navegador, no sé si será problema del navegador que estás usando o por otro motivo que desconozco.
Ese problema has tenido conocimiento de el a partir de hacer algún cambio?

Responder
Unknown

entendido, gem@. ahora veré si eso resuelve mi problema...;)

Responder
Maite

Pura delicadeza! pero también acompañan las imágenes que has seleccionado, claro está :D Es muy... tú.
Te echo de menoooooooos, quiero códigos, quiero quiero quiero tantas cosas!... :D
tengo una sorpresita que te va a encantar, pero no se por qué pasa que gmail y yo nos hemos enfadado hace un rato... (pregúntale a gra sobre un video nuevo ;) -boca abajo y con gafas de sol jajajaja
Un beso enorme.

Responder
BIGARIATO

Hola Gem@
Aquí arriba te preguntan de poner la Galería en una entrada del Blog, pero... yo te pregunto si los pasos son los mismos también para poner la Galería en una Página Estática.
En mi caso lo estoy intentando en mi Blog de Pruebas (cerrado al público) y no me sale. :(
Ah, el ancho de la Página Estática es el del ancho del Blog. Me interesan las imágenes grandes, claro.
Gracias por anticipado.

Responder
Ŵebmaster™

Gema, pues ya lo he quitado, lo quería utilizar para mostrar imágenes en las entradas... el código lo acepta la plantilla sin problemas, cuando coloco el código en la entrada

<ul class="thumb">

<li><a href="#"><img src="url-imagen" alt="" /></a></li>

</ul>

Me crea las miniaturas pero, estas no se amplían, pienso que puede ser algún tipo de incompatibilidad con jQuery, Prototype y Scriptaculous que tengo en mi blog.

Responder
Susy

La verdad es que queda de maravilla, quién pudiera!!! jajajaja

Responder
Gem@

:: Ojalalá se resuelva Lara :)

:: Maite Gmail esta tarde estaba enfadado con todo el mundo creo, me ha encantado la sosrpresa, tus deseos son ordenes y eliminado queda pero está en otro lugar porque es un regalo para cualquiera verlo :D
Yo también te extraño, cuídate un montón y regresa pronto !!!
Besos a miles :D

:: BIGARIATO no puedo saber donde está el problema, puede ser que no esté bien añadido, que te falte algún script, alguna etiqueta mal cerrada, que las páginas estáticas no funcionen bien y no acepte html o no lo muestre.
Como verás puede ser cualquier cosa, prueba en otro sitio y así descartas que sea la página estática.
Lo de las imágenes grandes no lo entiendo ¿está relacionado con la galería?

:: Sin duda debe ser eso Ŵebmaster™ ¿has probado el otro blog que no tenga ninguna otra galería :(

Responder
Gem@

:: Lo dices por jQuery Susy?

Responder
alif

hola gema, hace tiempo que sigo tu blog para poder implementar mis cosillas. Verás, llevo todo el día buscando una solución a un problema y aunque he buscado no encuentro la respuesta. Te escribo en esta entrada porque es la última aunque poco tiene que ver con el tema de la misma, espero que no te moleste. Necesito cambiar el color de la palabra etiquetas, o que no aparezca en la entrada. En la edición de entrada le indico que no ponga etiquetas pero en cambio las necesito en la sidebar. La sidebar tiene un color de fondo oscuro mientras que el main lo tiene claro de modo que o el texto se lee en un sitio o en otro pero no a la vez. ¿Se te ocurre alguna manera de cambiar el color a la palabra etiqueta que aparece bajo las entradas?

mil gracias:
espacioalif.blogspot.com

Responder
Gem@

:: Saludos alif, ls estilos de ese texto de "etiquetas" se encuentran en:
.post-footer {
margin: .75em 0;
color:#ffffb3 !important;
text-transform:uppercase;
...
...
...

prueba añadiendo !important; como puse y vemos si cambia de color.

Responder
Henry Herrera

Excelente aporte a la ciencia!, por eso siempre estas dentro de mis blogs favoritos.

Saludes Gemma, de Henry
!Cobrad Animo!

Responder
Gem@

:: Que alegría verte Henry y que eufórico vienes :)

Responder
Unknown

Una delicateza :D me he quedado mirando pero las imagenes no me dicen nada nuevo para contarte ;)

Yo diría que lo de Maite se trata de casi una vertical, se acuerdan de la vertical y la facilidad cuando uno es niño?

Besos!

Responder
Anónimo

Me encantó Gem@! Que linda presentación de imágenes. Lástima que tengo en uso Scriptaculous, ojalá pudiera implementarlo en el blog,con unas imágenes en el footer, será cuestión de probar, traerá conflicto? Bueno, no se puede todo en la vida. :-I Bsss :)

Responder
Eva Flores

muchas gracias Gema por tu respuesta!

Responder
alif

Muchas gracias!!, ha funcionado!!

Responder
alif

También me pasa con la fecha. Es en el mismo lugar o en otro? Mil gracias. Te recomiendo siempre que tengo un amigo haciendose un blog!

Responder
Gem@

:: Graciela las imágenes son familiares ¿verdad? me encantaron :)
Lo de Maite es una vertical en toda regla jajaja está para comérselo :D

:: Carolina CameronTags seguramente cree conflicto pero puede que encontremos alguna otra galería linda compatible, miraremos por ahí :)

:: De nada *Eva* :)

:: Estupendo alif :)
La fecha es un enlace, si está en el post-footer también la podemos cambiar desde ahí pero de la siguiente forma:

.post-footer a, .post-footer a:link, .post-footer a:visited {
color:#04B4AE !important;
.....
.....
}

.post-footer a:hover {
color:#000000;
....
....
}

Como no he podido verla porque aún no la tienes añadida no sé si tienes pensado poner algún texto junto a la fecha de ser así adquiere el mismo color que "etiquetas"

Responder
Unknown

gracias por tu ayuda gema. desde que empece a cambiar la plantilla html añadiendole cosas es cuando me ha dado el error que hace que se cierre el navegador... asi que supongo que sera por eso...

Responder
Anónimo

Gracias Gema@! Si, estuve haciendo pruebas y parece que no va, pero no importa, fue la emoción del momento :D, está lindisima esa presentación de imágenes. Mis imágenes con el efecto hover que aprendí aqui no están nada mal. Gracias por traernos temas interesantes :)

Responder
La hormiguita

Muy linda !!!!

Responder
Gem@

:: Ai-Amano lo ideal sería saber a partir de qué cambio ha sido para tener más claro lo que hay que modificar. De todas formas si quieres puedes preguntar a %% J.Miur a lo mejor sabe de qué trata el problema ;)

:: Gracias a ti por comentar Carolina CameronTags :)

:: Me alegra que te guste La hormiguita :D

Responder
squirrel

Uyy se ve buenísimo, pero ya lo había visto en una entrada (http://diyva.blogspot.com/2010/01/galeria-de-imagenes-con-jquery.html); la fuente de las dos entradas creo que es la misma (SOHTANAKA).

Pero bueno, mejor dos explicaciones en español que solo una, verdad ? :)

Besossss

Responder
Gem@

:: No me extraña que encuentres más explicaciones squirrel porque es una galería muy sencilla de crear sólo hay que seguir las explicaciones de SOHTANAKA y omitir en la última parte de los enlaces la parte que corresponde para mostrar la imagen grande.
Te dejo un %% enlace para que te entretengas, eso que ves lleva como dos meses en ese blog de pruebas ;)

Responder
alif

gracias gema de nuevo, es verdad que no tengo fechas, as quité porque me pasaba lo mismo. Ahora he decidido no ponerlas. Pero me ha surgido otroproblema. No quiero ser pesada pero pienso que tal vez otros puedan tener las mismas dudas. El problema es que con las búsquedas no e aparece lo que busco.

Se trata del cartel que aparece cuando linqueas sobre las entradas:
"Mostrando las entradas más recientes con la etiqueta corporativo Mostrar las entradas más antiguas"

¿uede quitarse?? Infinitas gracias.

De paso te comento estos dos recursos que he encontrado:
pictobrowser (galería de imágenes) y
emailmeform (para adjuntar formularios en el blog)

Responder
alif

perdón por las letras que faltan arriba, mi teclado no va bien.

Responder
Gem@

:: alif esa información de mostar la entradas la puedes quitar suprimiendo una línea, te dejo la entrada donde lo explico %% aquí
Sobre lo que dices que no encuentra algunas búsquedas llevas razón, estuve probando introduciendo algunas palabras de las que hay en el blog y no siempre las localizaba, sin embargo el buscador está correcto de no estarlo no localizaría ninguna, es cuestión de esperar y comprobar si sigue ocurriendo.
Tus aportaciones son todo un detalle que me ha encantado :)
Pictobrowser lo he probado y me da un error sobre algo relacionado con no tener las imágenes públicas y sin embargo sin las tengo así. Tendré que mirar más detenidamente ¿ya que lo estás usando tienes idea de qué puede ser?

Responder
HousePartyLights

hola gema,trate de añadir este codigo pero no funciona correctamente. el codigo funciona solo con la direccion de album picasa o puede ser otra direccion donde este alojada la foto? se añade el css y java o uno de los dos? gracias

Responder
BIGARIATO

Gracias Gem@... Al final me funcionó en las Páginas Estáticas, pero no era eso lo que buscaba. Creo que me decidiré por poner las imágenes con el efecto del script Expando. Saludos.

Responder
Gem@

:: HousePartyLights la url de la imagen debe ser una url directa da igual donde esté alojada.
Se añaden las dos cosas :)

:: Como o veas mejor BIGARIATO, no hay problema :)

Responder
squirrel

Hola Gem@
Creo que te molesté un poco por mi comentario y yo no quería disgustarte, de ningún modo.

Lo que quería decir con mi comentario era que es muy bueno que hayan dos o tres entradas sobre un mismo tema, cosa que llegamos a entender bien el tema y no tenemos dudas :)

Para mi, tu blog, junto con El Escaparate, Diversas& Variadas y el blog de Eulalia son los mejores.
Además, me dio gusto que en casi todos los blogs que mencioné se tocó el tema del Diseñador de plantilla, ahora lo manejo muy bien :)

Besossss y sigue adelante

Responder
alif

Gema, gracias de nuevo, tienes tantas cosas en el blog que cuesta encontrarlas.

¿qué cuenta usas para lo del pictobrowser?, yo uso picasa y no me da problemas, ¿cómo haces los pasos? seguro es una tontada.

Responder
Gem@

:: Disgustarme es mucho decir squirrel, eso es como decir "Tu comida está muy buena pero me comí la misma en otro sitio" ?????
No te preocupes, hiciste muy bien opinando aquí es el lugar ideal para opinar sobre algo, el sitio donde estamos leyendo :)

Responder
Gem@

:: alif pues mira, he probado con Picasa y ha ido estupendamente :D que alegría me ha dado ¡gracias!

Responder
Unknown

Hola wapa! hace tiempo que busco colocar una galeria de este tipo para aliviar la carga de las imagenes de Malina Graficos Maniac, pero una duda... la almohadilla # se puede enlazar a la imagen con el tamaño real, no?

Besazos!

Responder
Gem@

:: Así es malina la almohadilla puede ser sustituida por la imagen y si le añades target="_blank" evitas que te saque del sitio y la muestre en una nueva ventana.
<a href="url-imagen-grande"target="_blank"><img src="url-imagen-pequeña" alt="" /></a>

Responder
Gem@

:: Puse tu nombre en minúscula :$

Responder
La Trucoteca

Ayy, que efectazo más chulo, la verdad es que todo lo que funciona con JQuery es una maravilla :)
Gracias por compartirlo con todos nosotros :)
¡Un gran saludo!

Responder
Gem@

:: Me alegra que os guste La Trucoteca :)

Responder
Unknown

Gema algo hago mal :(
Mira he publicado una entrada con fecha muy antigua de prueba y no me sale el efecto. Puedes echar un vistacillo a la entrada porfissss :)

Responder
Gem@

:: Malina prueba a quitarle el //<![CDATA[ al principio y //]]> al final del script

Responder
Unknown

Gema, ahora si hace el efecto!

pero... no funciona el enlace al hacer click sobre la imagen, tampoco tu propio ejemplo.
:(

Espero noticias...

Responder
Gem@

:: Voy a mirar Malina porque el otro día si funcionaba el enlace :S

Responder
Gem@

:: Lo siento Malina pero no hay modo hasta lo consulté con JMiur y ese espacio que en un principio es para añadir un enlace está indicado para mostrar la imagen de mayor tamaño pero en la galería original de SOHTANAKA.

Responder
Unknown

ya lo he solucionado! es otra galería pero hace el efecto de la ampliación y a la vez funciona el enlace, ya te lo enseñaré...

Responder
Gem@

:: Estupendo Malina ya la veremos.

Responder
Anabel Cornago

Me gusta, me gusta... ¡Me estás tentando, jaja!

:D

Responder
Gem@

:: Te costó arrancar pero te has lanzado Anabel :D

Responder
Kas-Tro

a mi me sale desconfigurada mira http://prueba2056.blogspot.com/ hice todo lo que me dijiste mira aver por que me pasa eso..

Responder
Gem@

:: LinternaVerde no la veo añadida ¿dónde la has puesto?

Responder
PANDERISTAS I.A.F.C.J 17

ayuda estoy triste no me funciona....funciona para blogger? :$

Responder
Gem@

:: PANDERISTAS I.A.F.C.J 17 este blog es de Blogger, y el ejemplo está funcionando :)
Lo que debes añadir es la url de la imagen, en tu blog se ha añadido la url de la página donde está la imagen :S

Responder
PANDERISTAS I.A.F.C.J 17

me quede en este paso ...pegue el css y el java en la
diseño
*edicion de html

luego publique una nueva entrada y di en la pestaña edicion de html..pegue los links de las imagenes de flickr.. y en el ultimo paso,,descargue la foto y la subi a picassa web y a flickr e intente pegar los link el codigo en la parte que indica el ultimo paso del tutorial..y nada ninguna foto sale...no se que paso...


ul.thumb li img.hover {
background:url(url-imagen) no-repeat center cen

Responder
PANDERISTAS I.A.F.C.J 17

quedo mas o menos asi

ul.thumb li img.hover {
background:url(url-imagen) no-repeat center

ul.thumb li img.hover {
background:url(http://www.flickr.com/photos/51257332@N05/4750806962/) no-repeat center

o como es que va????o que me falta,,este es mi blog de prueba antes de comprar mi dominio y publicar mi blog

Responder
Gem@

:: Te respondía al mismo tiempo que lo hacías tú, y decía que la url que añades no es de la imagen sino de la página donde está alojada la imagen, debe ser una url directa a la imagen:

http://farm5.static.flickr.com/4078/4750806962_2dc4654d32.jpg

Responder
PANDERISTAS I.A.F.C.J 17

asi quedaron los links en mi nueva entrada
img src="http://flic.kr/p/8bSPfG" alt="" />

Responder
PANDERISTAS I.A.F.C.J 17

ya entendi,,,perdon no se que ando pensando,chale sera la presion de mi bodaaaaa....esperame deja lo intento como dices.....

Responder
Gem@

:: Veamos, si copias y pegas esa url en la barra del navegador verás que muestra la página donde está alojada la imagen, debe ser la url directa a la imagen.
Prueba a subirla a otro sitio y copias la url cuando visualizas la imagen, sólo la imagen.
En algunos ordenadires se hace poniendo el ratón sobre la imagen, botón derecho, ver imagen.

Responder
PANDERISTAS I.A.F.C.J 17

oyes podrias echarle un vistazo a mi sitio ahi esta al principio..esque nose que mas me falta..para que se muevan las fotos,,disculpa mi insistencia es que me gusto mucho el tutorial, y quisiera tenerla en mi web esa galeria.

http://panderistas17.blogspot.com/

Responder
Henry Herrera

Hola Gemma, he intentando realizar este hack con en este blog de pruebas:

http://lasbalsameras.blogspot.com/

me salen las miniaturas pero no logro hacer que funcione el "efecto", prácticamente a la plantilla no le he hecho mayor modificación que la del hack, que podría estar haciendo mal.

Busque ]]> como lo explicas y abajo de esta sentencia le agregue el CSS y después el JS

cree un post y le pegue los codigos el HTML y sustituí la imagen en blanco por la mia, ya subí la plantilla 3 veces y he seguido el mismo procedimiento sin éxito, serias tan amable en indicarme en donde esta mi error? o bien indicarme otra galería similar si esta no llegar a funcionar.

de antemano te agradezco mucho

Henry

Responder
Gem@

:: Henry mira donde tienes añadido el script de jquery/1.4.3/jquery.js porque al final se ve añadido un punto y coma. Seguramente sea eso, puedes eliminarlo y vemos si es eso.

Esta otra galería trabaja solamente con css sin scripts:
http://gemablog-.blogspot.com/2010/09/galeria-con-css-efecto-hover.html

Ya de paso decirte que a la que estás tratando de añadir me fue imposible hacer que las imágenes fueran enlaces te lo digo porque me he dado cuenta que en la entrada digo lo contrario.
Si quieres que sean enlaces posterior a esta entrada hice la siguiente:
http://gemablog-.blogspot.com/2010/08/galeria-de-imagenes-con-css.html

Responder
Henry Herrera

Gracias le quite el punto y coma pero sigue sin funcionar, lo que me decepciono fue que no puede ser enlace que para eso precisamente la quería.

Probé con el enlace de:
http://gemablog-.blogspot.com/2010/08/galeria-de-imagenes-con-css.html

y veo que necesitare hacer imágenes miniaturas (corregidme si estoy mal) para que todas sigan un tamaño especifico y no se salgan del marco, que fue lo que me gusto de la primera intentona.

Nuevamente me quedo a la espera de tu respuesta y desde ya te agradezco por el tiempo que haz invertido en mi persona.

Henry

Responder
Gem@

:: Hola Henry,en parte llevas razón porque las imágenes es conveniente añadirlas en el tamaño que vamos a mostrarlas con la idea de no cargar imágenes demasiado grandes si la finalidad es mostrarlas pequeñas, pero independientemente del tamaño y peso si es posible hacerlo de forma que no sea necesario crear miniaturas si especificamos el tamaño en el mismo código.
Cada enlace dice:
<a href="#" title="foto1"><img alt="foto1" src="url-foto1"/></a>

Y podemos añadir el tamaño así:

<a href="#" title="foto1"><img alt="foto1" src="url-foto1" height="110" width="110"/></a>

Con width y height adecuamos el tamaño ;)

Responder
Henry Herrera

Perfecto Gemma muchísimas gracias por toda tu ayuda, vamos a poner en marcha el hack y tus consejos.

Responder
Gem@

:: Cualquier cosa por aquí ando :)

Responder
Unknown

Muy bueno,
pero tengo un problema, las imagenes del thumb que tengo son de diferentes tamaños, unos de 220x100, otros de 100x220, y no puedo ponerle un tamaño fijo de 100x100 xk destruiria las imagenes, se alargaria o se ancharia demasiado, eso lo he arreglado kitando el ancho y alto en el css, y luego como no se k tamaño tienen las imagenes que saco, xk es aleatoria dependiendo de la base de datos, entonces no le puedo poner un ancho y un alto fijo en el hover, entonces les puse en la funcion:$("ul.thumb li").hover(function() un ancho de 120% y alto igual 120%, para que sea mas grande sin hover y que de este efecto, pero cuando quito el puntero del ranton que esta sobre el hover, ace eesta funcion:function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
}); y aqui ya no se que tamaño ponerle para que vuelva a su estado normal, ya que no me se el tamaño del thumb que saco. espero su ayuda, muchas gracias por el aporte

Responder
Elite Models Mexico

hola Gema excelente explicacion de como realizar la galeria, solo una cosa, es posible que se le pueda agregar enlaces a las entradas del blog ?, que en vez de realizar el efecto al poner el mouse encima de la imagen, esta pueda llevarte a la entrada de la imagen

gracias

Responder
Gem@

:: Con esta misma galería lo intenté en repetidas ocasiones y me fue imposible hacer que funcionara el efecto con enlaces, sin embargo en esta otra si que es posible:
http://gemablog-.blogspot.com/2010/08/galeria-de-imagenes-con-css.html

Responder
Anónimo

Hola Gema!

Aquí me ves, disfrutando de tus genialidades!
Instalé este truquito y me encanta!
Lo estaba necesitando y aunque sabía que vos lo tenías, lo había perdido de vista hasta que lo encontré hoy.
No hace el efecto que mostrás aquí al pasar el mouse. Pero en realidad eso no es problema porque quiero que se vean las imágenes en tamaño real al dar clic, como sucede en mi caso.
Adapté las medidas para el tipo de fotografías que muestro (más altas que anchas) y para que se vean un poco más grandes y entren justo en el espacio del post.
Lo único que quisiera eliminar (aunque tampoco es "dramático") es un punto o un rombito que aparece al costado de las miniaturas. No sé por qué puede ser.
Te dejo mi dirección por si tenés tiempo y ganas de verlo:

http://demujeramujer-moda.blogspot.com/

Desde ya y de nuevo, mil gracias!

Responder
Gem@

:: Hola Mariel :) busca en los estilos lo siguiente y añade la línea en negrita:

ul.thumb li {
float: left;
height: 220px;
margin: 0;
padding: 5px;
position: relative;
width: 160px;
list-style: none;
}

Responder
Anónimo

Qué buenísimo, Gema! :)

Es admirable lo que sabés! En un minutito, plif plaf! y todo solucionado! :D jajaja

No sé si te diste cuenta "al toque", como decimos por aquí, o viste el blog. Si entraste al blog habrás notado que exageré un piquitín con la cantidad de fotos, no? :S Y bueno, es el entusiasmo por el chiche nuevo! ;)

Muchísimas gracias otra vez, Gemita...!!!

Responder
Gem@

:: Vi el blog Mariel, no veo que exageres con las fotos el tema trata de eso no? :D

Responder
Anónimo

hola gema!, yo probe este efecto en una entrada de prueba queda todo impecable pero al pasar el cursor o hacer click no hace nada, es una pequeña imagen que no logra efecto como en la explicacion. chequeando mi plantilla, tu codigo usa:
code.jquery.com
mientras q debajo de ese mi plantilla tiene otro
text/javascript'
creo que es el que le da efecto de leer mas. seria por eso que anda a la mitad? me aconsejas sacar uno?

Gracias!!

Gem@

Jhessyka el que tu plantilla tenga otro script no es problema, pero verifica que los de este ejemplo están ubicados en el lugar indicado tal como se explica.
El no poder ver tu ejemplo es un inconveniente para poder ayudarte :S

Responder
Anónimo

hola! estuve sin internet estos dias.
Esta es la entrada de prueba de ese efecto

http://www.jhessy.net/2012/11/some-shots-from-my-cellphone.html

Gem@

Jhessyka prueba a quitar el enlace de las imágenes a Flickr.

Responder
Anónimo

Nop no hay caso pero por lo menor me lo deriva igual al flirck :O >>>>> :(

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top